﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 	<meta http-equiv="Content-Language" content="zh-CN" /> -->
<!-- 	<meta charset="utf-8" /> -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<title>机器人</title>
	<link href="css/index_bj.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
	<div id="top_div" class="top_line line_red" >
	</div>
	
	<div>
        <input type="button" id="tts_btn" onclick="doTTS()" value="播放" />
    </div>
	
	<div id="center_div">
		<div id="dv_free" style="width:100%;height:100%;display: none;text-align: center;">
			<div id="dv_top" class="top_bar bar_yellow " style="padding-bottom: 7%;">
				<div class="top_bar bar_red" style="height: 70%;padding-top: 5%;">
				</div>
			</div>
<!-- 			<div style="width:50%;height: 27%;margin:0 auto;margin-top:25%;background-image: url('{$SITE_URL}/public/static/jhp/img/logo_zy.png');background-size:100% 100%;"> -->
<!-- 			</div> -->
			<img src="img/logo_zy.png" style="width:50%;height: 27%;margin:0 auto;margin-top:20%;" alt="" />
			<div id="free_msg" style="display: none">
				<div style="margin-top: 10%"><span>欢迎光临中国石油</span></div>
				<div><span>加油机器人为您服务</span></div>
				<div><span style="font-size: 5.5vw">停车入位后请熄火并解锁油箱 </span></div>
			</div>
			<div id="over_msg" style="display: none;margin-top: 10%;">
				<div class="msg_title">
					<div class="msg_bg_green">
						<div style="padding-top: 6%;" class="over_font text_black">本次加油已完成</div>
						<div style="padding-bottom: 8%;" class="over_font text_black">可以驶离加油位</div>
					</div>
				</div>
				<div style="margin-top: 5%;"><span style="font-size: 6.5vw">欢迎您再次体验加油机器人</span></div>
			</div>
			<div id="dv_bottom" class="bottom_bar bar_yellow " style="padding-bottom: 5%;">
				<div class="bottom_bar bar_red" style="height: 70%;">
				</div>
			</div>
		</div>
		<div id="dv_working" style="display: none">
			<div id="msg_status" class="msg_status text_yellow" >
			</div>
			<div id="msg_title" class="msg_title">
				<div id="msg_bg" class="msg_bg_yellow">
					<div id="msg_car" class="msg_car text_black"></div>
					<div id="msg_font" class="msg_font text_black">请停车</div>
				</div>
			</div>
			<div class="msg_detail">
				<div id="normal_msg" style="display:none">
					<div style="font-size: 4.5vw;font-weight: bold;line-height: 6vw;text-align: center;">
						请把车停在可扫描范围内
					</div>
					<div style="font-size: 3.8vw;font-weight: 400;line-height: 4vw;text-align: left;">
						Please park your car within scanable rang
					</div>
				</div>
				<div id="again_msg" style="display:none">
					<div id="again_text" style="font-size: 5vw;font-weight: bold;line-height: 6vw;text-align: center;">
						请您把车辆往<span style="color: #FF0000;">右侧</span>挪动
					</div>
				</div>
				<div id="wait_msg" style="display:block;margin-top: -5%;">
					<div style="text-align: center;font-size: 4.8vw;font-weight: 400;line-height: 6vw;">
						您已停好车辆，请使用昆仑 好客e站APP下单，下单请 选择机器人加油，
					</div>
					<div style="text-align: center;font-size: 5.5vw;color:#FF0000;font-weight:bold;line-height: 12vw;">
						请您熄火 并解锁油箱盖 
					</div>
				</div>
				<div id="refueling_msg" style="display:none">
					<div>
						<ul>
							<li style="display: flex">
								<div style="width:50%;">油品</div>
								<div class="li_right" id="oil_type">#95</div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">金额</div>
								<div class="li_right" id="oil_money">200<span>元</span></div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">油量</div>
								<div class="li_right" id="oil_vol">20<span>升</span></div>
							</li>
						</ul>
					</div>
				</div>
				<div id="finish_msg" style="display:none">
					<div style="margin-top: -5%;">
						<ul>
							<li style="display: flex">
								<div style="width:50%;">枪号</div>
								<div class="li_right" id=>05</div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">油品</div>
								<div class="li_right" id="order_type">#95</div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">单价(元/升)</div>
								<div class="li_right" id="order_price">#95</div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">金额</div>
								<div class="li_right" id="order_money">200<span>元</span></div>
							</li>
							<li style="display: flex">
								<div style="width:50%;">油量</div>
								<div class="li_right" id="order_vol">20<span>升</span></div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="signal_box">
				<div id="stop_show" style="display: none">
					<div class="signal_car"></div>
				</div>
				<div id="finish_show" style="display: none;width: 88%;">
<!-- 					<div> -->
<!-- 						<div id="finish_car" class="signal_car" style="left:0;display: none;"> -->
<!-- 						</div> -->
<!-- 						<div class="signal_info"> -->
<!-- 							<table id="finish_table" style="display: none" class="table_sy table_text"> -->
<!-- 								<tr><td>#<span id="order_type">92</span></td></tr> -->
<!-- 								<tr><td>单价(元) <span id="order_price">6.5</span></td></tr> -->
<!-- 								<tr style="background-color: #EEEEEE"><td>加油金额(元)</td></tr> -->
<!-- 								<tr><td id="order_money">200</td></tr> -->
<!-- 								<tr style="background-color: #EEEEEE"><td>升数(L)</td></tr> -->
<!-- 								<tr><td id="order_vol">30</td></tr> -->
<!-- 							</table> -->
<!-- 						</div> -->
<!-- 					</div> -->
					<div class="border_box  box_font" style="border-radius: 10vw;margin-top: -25%;height: 120%;background-color: #E7C2CD;padding-top:3%;">
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">枪号</div>							
							<div class="box_item_right" style="color:#FF0000;">05</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">油品</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">#0</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">单价(元/升)</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">6.95</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">金额</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">200元</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">油量(升)</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">20升</div>							
						</div>
					</div>
				</div>
				<div id="again_show" style="display: none;">
					<div>
						<div class="signal_warining_car" style="left:0;">
							<img id="again_img" style="width:90%;height: 85%;padding-top:15%;padding-left:3%;"  class="car_too_bottom" src="img/car.png" alt="" />
						</div>
<!-- 						<div id="signal_info" style="width: 45%;position: absolute;right: 0;"> -->
<!-- 							<div style="padding: 32% 0 0 18%;"> -->
<!-- 								<img style="width:80%;height: 100%;margin-top: 15%" src="{$SITE_URL}/public/static/jhp/img/warning.png" alt="" /> -->
<!-- 							</div> -->
<!-- 						</div> -->
					</div>
				</div>
				<div id="auth_show" style="display: none;">
					<div class="border_box box_yellow box_font" style="height: 80%;">
						<div style="background-color: #FEC337;display: flex;margin-top: 10%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">枪号</div>							
							<div class="box_item_right" style="color:#FF0000;">05</div>							
						</div>
						<div style="background-color: #FEC337;display: flex;margin-top: 10%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">油品</div>							
							<div class="box_item_right" style="color:#FF0000;" id="auth_type">#0</div>							
						</div>
						<div style="background-color: #FEC337;display: flex;margin-top: 10%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">金额</div>							
							<div class="box_item_right" style="color:#FF0000;" id="auth_money">200元</div>							
						</div>
					</div>
				</div>
				<div id="wait_show" style="display: none;text-align: center;margin-top:-5%;font-size: 5vw;font-family: Microsoft YaHei;font-weight: bold;">
					<div>
						<div id="check_img" style="display: none;width:100%;">
							<img  style="width:70%;height: 100%;margin: auto;display: flex;" src="img/zy_ez.jpg" alt="" />
						</div>
						<div id="refuel_img_open" style="display: none;width:100%;">
							<img  style="width:88%;height: 85%;margin: auto;margin-top:-5%;display: flex;" src="img/goods/refuel_logo.jpg" alt="" />
							<!--<span>商品名称</span>-->
							<div></div>
						</div>
						<div id="refuel_img" style="display: none;width:100%;">
							<img  style="width:88%;height: 78%;margin: auto;margin-top:20%;display: flex;" src="img/goods/refuel_logo.jpg" alt="" />
							<!--<span>商品名称</span>-->
							<div></div>
						</div>
						<div id="refuel_img_close" style="display: none;width:100%;">
							<img  style="width:88%;height: 78%;margin: auto;margin-top:25%;display: flex;" src="img/goods/refuel_logo.jpg" alt="" />
							<!--<span>商品名称</span>-->
							<div></div>
						</div>
					</div>
				</div>
				<div id="warning_show" style="display: none;">
					<div style="display: flex;">
<!-- 						<img class="img1" style="width:70%;margin: auto;" src="{$SITE_URL}/public/static/jhp/img/warning.png" alt="" /> -->
						<img class="img3" style="width:70%;margin: auto;" src="img/warning_y.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="bottom_div" class="bottom_line line_red">
	</div>
	
	<script src="js/index_bj.js"></script>
	<script type="text/javascript">
	
	</script>
</body>
</html>
